<template>
  <div>

    <el-row :gutter="20" >
      <el-col :span="1">

        <el-tooltip content="主页" placement="top">
          <img src="../assets/lg.png" id="lg" @click="home">
        </el-tooltip>

      </el-col>
      <el-col :span="4">
        <span id="title" >区块链模型交易平台</span>
      </el-col>
      
      <el-col :span="1.5" :offset="10">
        <el-dropdown>
          <span class="el-dropdown-link">
            下载文件<i class="el-icon-arrow-down"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            
            <el-dropdown-item>
            
            <a :href="`${path}Software function introduction.docx`" 
                download="软件功能说明书模板.pdf"
                >下载软件功能说明书模板</a>
            </el-dropdown-item>
            <el-dropdown-item>
              <a :href="`${path}Software Test Report.pdf`" 
                download="软件测试报告模板.pdf">下载软件测试报告模板</a>
          </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        
      </el-col>
      
      <el-col :span="1.5">
        <el-button type="primary" round >已上传模型</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" round  @click="logout" v-show="userToken">&nbsp;&nbsp;注销&nbsp;&nbsp;</el-button>
      </el-col>
      <el-col :span="1">
        <el-tooltip content="个人简介" placement="top">
          <img src="../assets/user.png" id="user" @click="profile">
        </el-tooltip>
      </el-col>

    </el-row>
  </div>
</template>

<script>
export default {
  name: "Header2",
  data() {
    return {
      input: '',
      userToken:localStorage.getItem('Authorization'),
      path: process.env.BASE_URL
      
    }
  },
  methods: {
    // register(){
    //   this.$router.push("/register")
    // },
    // login(){
    //   this.$router.push("/login")
    // },
    //点击图标返回首页 
    home(){
        this.$router.push("/")
    },
    //点击头像进入个人简介页面
    profile(){
      this.$router.push("/profile")
    },
    logout(){
      localStorage.removeItem('Authorization')
      this.$router.push("/login")
    }
  }
}
</script>

<style scoped>
.s2{    /*s2是我的输入框class*/
}
/deep/ .el-input__inner { /*或者 .s2>>>.el-input__inner  */

  border-radius: 20px; /*输入框圆角值*/
  background-color: #ffffff;
  /*background: transparent;*/
}
.el-button {
  background: #3A62D7;
  border: #3A62D7;
}
.el-dropdown-link {
  
  border-radius: 30px;
  background: #3A62D7;
  color: rgba(255, 255, 255, 100);
  font-size: 14px;
  text-align: center;
  border: 10.5px solid #3A62D7;
}
#user {
  width: 38px;
  height: 40px;
  margin-top: 10px;
}
#lg {
  width: 70px;
  height: 40px;
  margin-top: 10px;

}
#title {
  font-size: 30px;
  font-weight: bold;

}
.el-row {

  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;

}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
a{
  text-decoration:none;
}
a:link {
    color:#606266;
}

a:hover {
    color:#3A62D7;
}
    
a:active {
    color:#606266;
}
</style>